<template>
<div>
  <input 
    type="text" 
    v-model="todoValue"
    @keyup="setTodoValue"  
  >
</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { IUseTodo, useTodo } from '../../hooks';

export default defineComponent({
  name: 'TodoInput',
  setup () {
    // 可以使用reactive跟ref； ref单个数据用的多一点
    const todoValue = ref<string>(''); // ref类型注解加个泛型就好了
    const { setTodo }: IUseTodo = useTodo();

    // e的类型注解KeyboardEvent (返回值为空 :void)
    // setTodoValue 类型推导
    const setTodoValue = (e: KeyboardEvent): void => { // 设置函数返回值
      
      if(e.keyCode === 13 && todoValue.value.trim().length) {
        // 设置数据
        setTodo(todoValue.value);
        // 清空输入框
        todoValue.value = '';
      }
    }

    return {
      todoValue,
      setTodoValue
    }
  }
})
</script>

<style scoped>

</style>